<template>
    <div class="dialog">
        <el-dialog v-model="UserStore.visiable" title="用户登录">
            <!-- 对话框身体部分结构 -->
            <div class="content">
                <el-row>
                    <!-- 左侧结构：收集号码登录、微信扫一扫登录 -->
                    <el-col :span="12">
                        <div class="login">
                            <!-- 账号登录 -->
                            <div v-show="sence == 0">
                                <el-form :model="loginParam" :rules="rules">
                                    <el-form-item prop="phone">
                                        <el-input placeholder="请输入你的手机号码" v-model="loginParam.phone" ></el-input>
                                    </el-form-item>
                                    <el-form-item prop="code">
                                        <el-input placeholder="请输入验证码" v-model="loginParam.code"></el-input>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button :disabled="!isPhone || flag ? true : false">
                                            <CountDown v-if="flag" :flag="flag" @getFlag="getFlag"></CountDown>
                                            <span v-else @click="getCode">获取验证码</span>
                                        </el-button>
                                    </el-form-item>
                                </el-form>
                                <div class="bottom">
                                    <el-button style="width: 90%; " type="primary" size="default"
                                        :disabled="!isPhone || loginParam.code.length < 6 ? true : false"
                                        @click="login">用户登录</el-button>

                                    <p @click="changeSence">微信扫码登录</p>
                                    <svg @click="changeSence" t="1688462320650" class="icon" viewBox="0 0 1024 1024"
                                        version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1913" width="32" height="32">
                                        <path
                                            d="M337.387283 341.82659c-17.757225 0-35.514451 11.83815-35.514451 29.595375s17.757225 29.595376 35.514451 29.595376 29.595376-11.83815 29.595376-29.595376c0-18.49711-11.83815-29.595376-29.595376-29.595375zM577.849711 513.479769c-11.83815 0-22.936416 12.578035-22.936416 23.6763 0 12.578035 11.83815 23.676301 22.936416 23.676301 17.757225 0 29.595376-11.83815 29.595376-23.676301s-11.83815-23.676301-29.595376-23.6763zM501.641618 401.017341c17.757225 0 29.595376-12.578035 29.595376-29.595376 0-17.757225-11.83815-29.595376-29.595376-29.595375s-35.514451 11.83815-35.51445 29.595375 17.757225 29.595376 35.51445 29.595376zM706.589595 513.479769c-11.83815 0-22.936416 12.578035-22.936416 23.6763 0 12.578035 11.83815 23.676301 22.936416 23.676301 17.757225 0 29.595376-11.83815 29.595376-23.676301s-11.83815-23.676301-29.595376-23.6763z"
                                            fill="#28C445" p-id="1914"></path>
                                        <path
                                            d="M510.520231 2.959538C228.624277 2.959538 0 231.583815 0 513.479769s228.624277 510.520231 510.520231 510.520231 510.520231-228.624277 510.520231-510.520231-228.624277-510.520231-510.520231-510.520231zM413.595376 644.439306c-29.595376 0-53.271676-5.919075-81.387284-12.578034l-81.387283 41.433526 22.936416-71.768786c-58.450867-41.433526-93.965318-95.445087-93.965317-159.815029 0-113.202312 105.803468-201.988439 233.803468-201.98844 114.682081 0 216.046243 71.028902 236.023121 166.473989-7.398844-0.739884-14.797688-1.479769-22.196532-1.479769-110.982659 1.479769-198.289017 85.086705-198.289017 188.67052 0 17.017341 2.959538 33.294798 7.398844 49.572255-7.398844 0.739884-15.537572 1.479769-22.936416 1.479768z m346.265896 82.867052l17.757225 59.190752-63.630058-35.514451c-22.936416 5.919075-46.612717 11.83815-70.289017 11.83815-111.722543 0-199.768786-76.947977-199.768786-172.393063-0.739884-94.705202 87.306358-171.653179 198.289017-171.65318 105.803468 0 199.028902 77.687861 199.028902 172.393064 0 53.271676-34.774566 100.624277-81.387283 136.138728z"
                                            fill="#28C445" p-id="1915"></path>
                                    </svg>

                                </div>
                            </div>
                            <!-- 扫码登录 -->
                            <div v-show="sence == 1">
                                <div id="login_contaniner"></div>
                            </div>
                        </div>

                    </el-col>
                    <!-- 右侧二维码 -->
                    <el-col :span="12">
                        <div class="right">
                            <div class="top">
                                <div class="item">
                                    <img src="../../assets/image/code_app.png" alt="">
                                    <svg t="1688462320650" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                        xmlns="http://www.w3.org/2000/svg" p-id="1913" width="16" height="16">
                                        <path
                                            d="M337.387283 341.82659c-17.757225 0-35.514451 11.83815-35.514451 29.595375s17.757225 29.595376 35.514451 29.595376 29.595376-11.83815 29.595376-29.595376c0-18.49711-11.83815-29.595376-29.595376-29.595375zM577.849711 513.479769c-11.83815 0-22.936416 12.578035-22.936416 23.6763 0 12.578035 11.83815 23.676301 22.936416 23.676301 17.757225 0 29.595376-11.83815 29.595376-23.676301s-11.83815-23.676301-29.595376-23.6763zM501.641618 401.017341c17.757225 0 29.595376-12.578035 29.595376-29.595376 0-17.757225-11.83815-29.595376-29.595376-29.595375s-35.514451 11.83815-35.51445 29.595375 17.757225 29.595376 35.51445 29.595376zM706.589595 513.479769c-11.83815 0-22.936416 12.578035-22.936416 23.6763 0 12.578035 11.83815 23.676301 22.936416 23.676301 17.757225 0 29.595376-11.83815 29.595376-23.676301s-11.83815-23.676301-29.595376-23.6763z"
                                            fill="#bfbfbf" p-id="1914"></path>
                                        <path
                                            d="M510.520231 2.959538C228.624277 2.959538 0 231.583815 0 513.479769s228.624277 510.520231 510.520231 510.520231 510.520231-228.624277 510.520231-510.520231-228.624277-510.520231-510.520231-510.520231zM413.595376 644.439306c-29.595376 0-53.271676-5.919075-81.387284-12.578034l-81.387283 41.433526 22.936416-71.768786c-58.450867-41.433526-93.965318-95.445087-93.965317-159.815029 0-113.202312 105.803468-201.988439 233.803468-201.98844 114.682081 0 216.046243 71.028902 236.023121 166.473989-7.398844-0.739884-14.797688-1.479769-22.196532-1.479769-110.982659 1.479769-198.289017 85.086705-198.289017 188.67052 0 17.017341 2.959538 33.294798 7.398844 49.572255-7.398844 0.739884-15.537572 1.479769-22.936416 1.479768z m346.265896 82.867052l17.757225 59.190752-63.630058-35.514451c-22.936416 5.919075-46.612717 11.83815-70.289017 11.83815-111.722543 0-199.768786-76.947977-199.768786-172.393063-0.739884-94.705202 87.306358-171.653179 198.289017-171.65318 105.803468 0 199.028902 77.687861 199.028902 172.393064 0 53.271676-34.774566 100.624277-81.387283 136.138728z"
                                            fill="#bfbfbf" p-id="1915"></path>
                                    </svg>
                                    <p>微信扫一扫关注</p>
                                    <p>“快速预约挂号”</p>
                                </div>
                                <div class="item">
                                    <img src="../../assets/image/code_login_wechat.png" alt="">
                                    <svg t="1688463021638" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                        xmlns="http://www.w3.org/2000/svg" p-id="4192" width="16" height="16">
                                        <path
                                            d="M798.723234 174.782745c0-60.576657-49.106418-109.683075-109.683075-109.683075l-354.708628 0c-60.576657 0-109.683075 49.106418-109.683075 109.683075l0 673.980161c0 60.576657 49.106418 109.683075 109.683075 109.683075l354.708628 0c60.576657 0 109.683075-49.106418 109.683075-109.683075L798.723234 174.782745zM264.557398 237.015112l494.256894 0 0 529.049305-494.256894 0L264.557398 237.015112zM334.356091 105.008612 689.016623 105.008612c38.548968 0 69.798692 31.249725 69.798692 69.798692l0 22.298865-494.256894 0 0-22.298865C264.557398 136.25936 295.807123 105.008612 334.356091 105.008612zM689.016623 918.53704 334.356091 918.53704c-38.548968 0-69.798692-31.249725-69.798692-69.798692l0-43.788296 494.256894 0 0 43.788296C758.814292 887.287315 727.564567 918.53704 689.016623 918.53704z"
                                            fill="#272636" p-id="4193"></path>
                                        <path
                                            d="M513.173732 829.943282c-16.70752 0-30.30112 13.5936-30.30112 30.30112 0 16.70752 13.5936 30.30112 30.30112 30.30112s30.299073-13.5936 30.299073-30.30112C543.472805 843.536882 529.881253 829.943282 513.173732 829.943282z"
                                            fill="#272636" p-id="4194"></path>
                                    </svg>
                                    <p>扫一扫下载</p>
                                    <p>“预约挂号”app</p>
                                </div>
                            </div>
                        </div>

                    </el-col>

                </el-row>
            </div>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import userStore from '@/store/modules/user.ts'
import { reactive, ref, computed } from 'vue';
import CountDown from '../countdown/index.vue'
import type {WxLoginResponseDate} from '@/api/hospital/type'
// 引入wx扫码登录参数的请求
import {reqWxLogin} from '@/api/hospital/index.ts'
let UserStore = userStore()

// 定义一个响应式数据控制倒计时组件的隐藏与显示
let flag = ref<boolean>(false)
let sence = ref<number>(0)
// 手机表单的手机号码
let loginParam = reactive({
    phone: '',//收集手机号码
    code: ''  //收集验证码
})

// 计算出当前表单元素收集的内容是否是手机号码的格式
let isPhone = computed(() => {
    // 手机号码的正则表达式
    const reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
    return reg.test(loginParam.phone)
})

// 改变sence的函数
const changeSence = async() => {
    // 场景切换为一
    sence.value = 1
    // 发送请求获取微信扫码二维码需要参数
    let redirect_URL = encodeURIComponent(window.location.origin+'/wxlogin')
    let result:WxLoginResponseDate = await reqWxLogin(redirect_URL)
    console.log(result);
    
    // 生成微信扫码二维码页面
    // @ts-ignore
    new WxLogin({
        self_redirect: true, //ture:手机点击确认登陆后可以在 iframe 内跳转到redirect_uri
        id:"login_contaniner", //显示二维码的容器
        appid: result.data.appid,               //应用标示appid
        scope:"snsapi_login",   //当前微信扫码登录页面已经授权
        redirect_uri: result.data.redirectUri,    //填写授权回调域路径，就是用户授权以后，微信服务器会向后台推送code地址
        state: result.data.state,       //state就是后台服务器重定向地址携带用户的信息
        style:"black",       //
        href:"",

    })


}

// 获取验证码按钮的回调
const getCode = async () => {
    //开启倒计时模式，倒计时组件显示出来 
    flag.value = true
    // 通知pinia仓库存储验证码
    try {
        // 获取验证码成功
        await UserStore.getCode(loginParam.phone)
        loginParam.code = UserStore.code
    } catch (error) {
        // 获取验证码失败


    }

}

// 自定义子组件绑定的自定义事件
// 当倒计时为零的时候，通知父组件倒计时组件隐藏
const getFlag = (value: boolean) => {
    flag.value = value

}

// 点击用户登录按钮的回调
const login = async()=>{
    // 发起登录请求
    // 登录成功：顶部出现需要展示用户名字、对话关闭
    // 登陆失败：弹出对应登录失败的错误信息
    try {
        // 登录成功
        await UserStore.userLogin(loginParam)
        UserStore.visiable = false

    } catch (error) {
       

    }
}
// 表单校验的规则对象
const rules = {
    // 手机号码校验规则
    // required：代表当前字段务必进行校验
    // message：代表的校验错误的提示信息
    // trigger：代表表单校验触发时机 change：文本发生变化时的时候进行校验  blur：失去焦点的时候发生校验
    phone:[
        {required:true,message:'手机号码务必11位',trigger:'change',min:11}
    ],
    code:[
        {required:true,message:'验证码务必6位',trigger:'change',min:6}  
    ]

}

</script>

<style scoped lang="scss">
.dialog {
    ::v-deep(.el-dialog__body) {
        border: 1px solid #ccc;
    }

    .login {
        border: 1px solid #ccc;
        padding: 20px;

        .bottom {
            display: flex;
            flex-direction: column;
            align-items: center;

            p {
                margin: 10px 0;

                &:hover {
                    color: skyblue;
                    cursor: pointer;
                }
            }

            svg {
                cursor: pointer;
            }
        }
    }

    .right {
        .top {
            display: flex;
            justify-content: space-around;

            .item {
                display: flex;
                flex-direction: column;
                align-items: center;

                p {
                    margin-bottom: 5px;
                }

                svg {
                    margin: 5px 0;
                }

                img {
                    height: 130px;
                    width: 130px;
                }
            }
        }
    }


}
</style>